﻿/// <reference path="jquery-1.4.1-vsdoc.js" />

$(function() {
    DealWithTab("simpleTab");
    DealWithButton("simpleBtn");
    DealWithShowDataTable("showDataTable");
    DealWithInputTable("inputDataTable");
    DealWithSimpleTextBox("simpleText");
    DealWithRoundDiv("roundDiv");
    DealWithTextArea("simpleTextArea");
});


function DealWithButton(className) {
    $("." + className).each(function() {
        $(this).removeAttr("disabled");
    });
    
    
    $("." + className).click(function() {
        var disable = $(this).attr("DisableWhenClick");
        if (disable != null && disable == "true") {
            $(this).css("background-color", "#eee");
            $(this).css("border", "1px solid #d9d9d9");
            $(this).css("color", "gray");
            $(this).attr("disabled", "disabled");
        }
    });

    $("." + className).hover(
         function() {  /*hover*/
             var button = $(this);
             if (button.attr("disabled") != "disabled") {
                 button.css("background-color", "#2FA7E1");
             }
         },
         function() { /*out*/
             var button = $(this);
             if (button.attr("disabled") != "disabled") {
                 button.css("background-color", "#0099E1");
             }
         }
    );

    $("." + className).mousedown(function() {
        
    });
}

function DealWithInputTable(tablClassName) {
    $("." + tablClassName + ">tbody>tr:even").addClass("inputDataTableEvenTr");
    $("." + tablClassName + ">tbody>tr:odd").addClass("inputDataTableOddTr");

    $("." + tablClassName + ">tbody>tr").each(function() {
        var tr = $(this);
        tr.children("td:eq(0)").css("background-color", "#F9F9F9");
    });
}

function DealWithShowDataTable(tableClassName) {

    alterBackgroundColor(tableClassName);
    addFooter();

    //cancle double click of the text
    $("." + tableClassName + " th").each(function() {
        $(this).attr("unselectable", "on"); //IE and Opera
        $(this).attr("onselectstart", "return false;");
        $(this).css("-moz-user-select", "none"); //FireFox
    });


    $("." + tableClassName + " thead tr th").click(function() {
        var table = $(this).parent().parent().parent();

        changeBackgroundArrow($(this));

        var arr = [];
        var row = $(table).find('tbody>tr');
        $.each(row, function(i) {
            arr[i] = row[i]; //convert to array,so that we can use the sort method.
        });

        var index = $(table).find('th').index(this); //get clicked [th] element index

        if ($(this).hasClass('currentSortColumn')) {
            arr.reverse();
        }
        else {
            arr.sort(compare(index, judgeCurrentColumnType(this, row, index)));
        }
        $(this).parent().children(".currentSortColumn").removeClass();
        $(this).addClass('currentSortColumn');
        var fragment = document.createDocumentFragment(); //use document fragment to storage sorted array
        $.each(arr, function(i) {
            fragment.appendChild(arr[i]);
        });
        $(table).children("tbody").remove('tr');
        $(table).children("tbody").append(fragment);
        alterBackgroundColor(tableClassName);

    });

    //judge clicked column type,so we can use different method to compare them
    function judgeCurrentColumnType(clickedTh, row, columnIndex) {

        var datatype = $(clickedTh).attr('datatype');
        if (datatype != null) return datatype;

        var t1 = $.trim($(row[0]).find("td").eq(columnIndex).text());
        var t2 = $.trim($(row[parseInt($(row).length / 2)]).find("td").eq(columnIndex).text());
        var t3 = $.trim($(row[$(row).length - 1]).find("td").eq(columnIndex).text());


        if (!isNaN(t1) && !isNaN(t2) && !isNaN(t3)) {
            $(clickedTh).attr("datatype", "number");
            return "number";
        }
        if (!isNaN(Date.parse(t1)) && !isNaN(Date.parse(t2)) && !isNaN(Date.parse(t3))) {
            $(clickedTh).attr("datatype", "date");
            return "date";
        }

        $(clickedTh).attr("datatype", "text");
        return "text";
    }

    //this method is used by [sort] method,
    function compare(index, datatype) {
        return function(a, b) {
            var atext = $(a).find('td').eq(index).text();
            var btext = $(b).find('td').eq(index).text();
            switch (datatype) {
                case "number":
                    return atext - btext;

                case "date":
                    return Date.parse(atext) - Date.parse(btext);

                default:
                    return atext.localeCompare(btext);
            }
        };
    }

    function changeBackgroundArrow(currentTh) {

        var currentCss = $(currentTh).css("background-image");
        if (currentCss.toString().indexOf("up.png") > 0) {

            $(currentTh).parent().children(".currentSortColumn").css("background-image", "url()");

            $(currentTh).css("background-image", "url('http://aciwebdev/StandardUIDev/Images/Core/down.png')");
            $(currentTh).css("background-repeat", "no-repeat");
            $(currentTh).css("background-position", "center right");
        }
        else {

            $(currentTh).parent().children(".currentSortColumn").css("background-image", "url()");


            $(currentTh).css("background-image", "url('../Images/Core/up.png')");
            $(currentTh).css("background-repeat", "no-repeat");
            $(currentTh).css("background-position", "center right");
        }
    }

    function alterBackgroundColor(tableClass) {

        $("." + tableClass + " tbody tr").removeClass("showDataTableEvenTr");
        $("." + tableClass + " tbody tr").removeClass("showDataTableOddTr");

        $("." + tableClass + " thead th").addClass("showDataTableHeadTr");
        $("." + tableClass + " tbody tr:even").addClass("showDataTableEvenTr");
        $("." + tableClass + " tbody tr:odd").addClass("showDataTableOddTr");
    }

    function addFooter() {
        $("." + tableClassName).each(function() {
            var table = $(this);

            if (table.hasClass("tableFooter")) {
                var width = table.css("width");
                $(table).removeAttr("width");
                $(table).width("100%");
                var rows = table.find('tbody>tr');
                var selfElementHtml = $("<div></div>").append(table.clone()).html();
                var newHtml = "<table style='width:" + width + ";'><tr><td>" + selfElementHtml +
                              "</td><tr>" +
                              "<tr><td align='right'>Total: " + rows.length + " records</td></tr></table>";
                table.after(newHtml);
                table.remove();
            }
        });

    }

}

//function DealWithTextBox(className) {
//    var textColor = "transparent";
//    var textHoverColor = "transparent";
//    var textFocusColor = "#3D95FF";
//    var textParentColor = "#D9D9D9";
//    var textParentHoverColor = "#B9B9B9";
//    var textParentFocusColor = "#49ACE7";

//    $("." + className).each(function() {
//        var textBox = $(this);
//        var width = textBox.outerWidth();
//        var height = textBox.outerHeight();
//        textBox.css("line-height", textBox.css("height"));

//        var selfElementHtml = $("<div></div>").append(textBox.clone()).html();
//        var newHtml;
//        var waterMark = textBox.attr("watermark");
//        if (waterMark != null) {
//            newHtml = "<table style='display:inline;' class='textParentTable'><tbody><tr><td class='textParent' style='cursor:text;width:" + width + "px;height:" + height + "px;'>" +
//                     selfElementHtml +
//                     "</td></tr>" +
//                         "<tr class='textWaterMarkTr'><td  valign='middle'><b class='textWaterMark' style='margin-left:3px;margin-top:-" + (Math.ceil(height / 2) + 7) + "px;'>" + waterMark + "</b></td></tr>" +
//                         "</table>";
//        }
//        else {
//            newHtml = "<table style='display:inline;' class='textParentTable'><tbody><tr><td class='textParent' style='cursor:text;width:" + width + "px;height:" + height + "px;'>" +
//                     selfElementHtml + "</td></tr></table>";
//        }
//        textBox.after(newHtml);
//        textBox.remove();
//    });


//    $(".textWaterMark").hover(
//         function() {  /*hover*/
//             var waterMark = $(this);
//             var textBox = waterMark.parent().parent().parent().parent().find(".text");
//             var textBoxParent = textBox.parent();

//             var hasFocusIn = waterMark.attr("hasFocusIn");
//             if (hasFocusIn == null || hasFocusIn == "false") {
//                 textBox.css("border-color", textHoverColor);
//                 textBoxParent.css("border-color", textParentHoverColor);
//             }
//         },
//         function() { /*out*/
//             var waterMark = $(this);
//             var textBox = waterMark.parent().parent().parent().parent().find(".text");
//             var textBoxParent = textBox.parent();

//             var hasFocusIn = waterMark.attr("hasFocusIn");
//             if (hasFocusIn == null || hasFocusIn == "false") {
//                 textBox.css("border-color", textColor);
//                 textBoxParent.css("border-color", textParentColor);
//             }
//         }
//  );

//    $("." + className).hover(
//         function() {  /*hover*/
//             var textBox = $(this);
//             var textBoxParent = textBox.parent();
//             var waterMark = $(this).parent().parent().parent().parent().find(".textWaterMark");
//             var hasFocusIn = textBox.attr("hasFocusIn");
//             if (hasFocusIn == null || hasFocusIn == "false") {
//                 textBox.css("border-color", textHoverColor);
//                 textBoxParent.css("border-color", textParentHoverColor);
//             }
//         },
//         function() { /*out*/
//             var textBox = $(this);
//             var textBoxParent = textBox.parent();
//             var waterMark = $(this).parent().parent().parent().parent().find(".textWaterMark");
//             var hasFocusIn = textBox.attr("hasFocusIn");
//             if (hasFocusIn == null || hasFocusIn == "false") {
//                 textBox.css("border-color", textColor);
//                 textBoxParent.css("border-color", textParentColor);
//             }
//         }
//  );


//    $(".textWaterMark").click(function() {

//        var waterMark = $(this);
//        var textBox = waterMark.parent().parent().parent().parent().find(".text");
//        var textBoxParent = waterMark.parent().parent().parent().parent().find(".textParent");

//        // alert(textBoxParent.html());
//        //      textBox.focus();

//        //textBox.css("display", "inline");
//        //
//        $(waterMark).css("display", "none");

//        textBox.attr("hasFocusIn", "true");
//        textBox.css("border-color", textFocusColor);
//        textBoxParent.css("border-color", textParentFocusColor);

//        textBox.focus();
//    });


//    $("." + className).focusin(function() {
//        var waterMark = $(this).parent().parent().parent().parent().find(".textWaterMark");
//        var textBoxParent = $(this).parent();

//        $(waterMark).css("display", "none");
//        $(this).focus();

//        $(this).css("border-color", textFocusColor);
//        $(this).attr("hasFocusIn", "true");
//        textBoxParent.css("border-color", textParentFocusColor);

//    });

//    $("." + className).focusout(function() {
//        var textBox = $(this);
//        var waterMark = $(this).parent().parent().parent().parent().find(".textWaterMark");
//        var textBoxParent = $(this).parent();

//        $(this).attr("hasFocusIn", "false");

//        var value = $(this).val();
//        if (value.length == 0) {
//            $(waterMark).css("display", "");
//        }

//        textBox.css("border-color", textColor);
//        textBoxParent.css("border-color", textParentColor);
//    });
//}

function DealWithSimpleTextBox(className) {
    var textColor = "#D9D9D9";
    var textHoverColor = "#D9D9D9";
    var textFocusColor = "#6DC5EE";

    $("." + className).each(function() {
        var textbox = $(this);
        var height = textbox.outerHeight();
        var waterMark = textbox.attr("watermark");

        textbox.css("line-height", (height - 4) + "px");
        textbox.css("border-color", textColor);
        if (waterMark != null && waterMark.length > 0) {
            textbox.val(waterMark);
            textbox.addClass("waterMark");
        }
    });

    $("." + className).focusin(function() {
        var textbox = $(this);
        var waterMark = textbox.attr("waterMark");
        textbox.attr("hasFocusIn", "true");
        if (waterMark != null && waterMark.length > 0) {
            var currentVal = textbox.val();
            if (currentVal == waterMark) {
                textbox.val("");
                textbox.removeClass("waterMark");
            }
        }
        textbox.css("border-color", textFocusColor);
    });

    $("." + className).focusout(function() {
        var textbox = $(this);
        var waterMark = textbox.attr("waterMark");
        textbox.attr("hasFocusIn", "false");
        if (waterMark != null && waterMark.length > 0) {
            var currentVal = textbox.val();
            if (currentVal == "") {
                textbox.val(waterMark);
                textbox.addClass("waterMark");
            }
        }
        textbox.css("border-color", textColor);
    });

    $("." + className).hover(
        function() {  /*hover*/
            var textBox = $(this);
            var hasFocusIn = textBox.attr("hasFocusIn");
            if (hasFocusIn == null || hasFocusIn == "false") {
                textBox.css("border-color", textHoverColor);
            }
        },
         function() { /*out*/
             var textBox = $(this);
             var hasFocusIn = textBox.attr("hasFocusIn");
             if (hasFocusIn == null || hasFocusIn == "false") {
                 textBox.css("border-color", textColor);
             }
         }
    );
}

function DealWithRoundDiv(className) {
    var divs = $("." + className);

    $(divs).each(function() {
        var div = $(this);
        var borderColor = $(div).css("border-top-color");
        var divHeight = $(div).outerHeight();
        if (borderColor == null || borderColor.length == 0) {
            borderColor = $(div).css("background-color");
            if (borderColor == null || borderColor.length == 0) return;
        }

        $(div).css("border", "none");

        var innerHtml = div.html();
        var newHtml = "<b style='margin:0 5px;display:block;font-size:1px;height:1px;overflow:hidden;background-color:" + borderColor + "'></b>" +
                      "<b style='margin:0 3px;border-left:2px solid;border-right:2px solid;border-color:" + borderColor + ";display:block;font-size:1px;height:1px;overflow:hidden;'></b>" +
                      "<b style='margin:0 2px;border-left:1px solid;border-right:1px solid;border-color:" + borderColor + ";display:block;font-size:1px;height:1px;overflow:hidden;'></b>" +
                      "<b style='margin:0 1px;border-left:1px solid;border-right:1px solid;border-color:" + borderColor + ";display:block;font-size:1px;height:2px;overflow:hidden;'></b>" +
                      "<div style='border-left:1px solid " + borderColor + ";border-right:1px solid " + borderColor + ";height:" + divHeight + "px;'>" + innerHtml + "</div>" +
                      "<b style='margin:0 1px;border-left:1px solid;border-right:1px solid;border-color:" + borderColor + ";display:block;font-size:1px;height:2px;overflow:hidden;'></b>" +
                      "<b style='margin:0 2px;border-left:1px solid;border-right:1px solid;border-color:" + borderColor + ";display:block;font-size:1px;height:1px;overflow:hidden;'></b>" +
                      "<b style='margin:0 3px;border-left:2px solid;border-right:2px solid;border-color:" + borderColor + ";display:block;font-size:1px;height:1px;overflow:hidden;'></b>" +
                      "<b style='margin:0 5px;display:block;font-size:1px;height:1px;overflow:hidden;background-color:" + borderColor + "'></b>";
        div.html(newHtml);
    });
}

function DealWithTab(className) {
    $("." + className).each(function() {
        var tab = $(this);
        var tabContentDiv = tab.children(".simpleTabContent");
        var height = tab.outerHeight();
        var width = tab.outerWidth();

        //change code struct
        var titleDiv = "<div class='simpleTabTitle'>";
        var contentDiv = "<div class='simpleTabContent'style='width:" + (width - 22) + "px'>";
        $(tab).children("span").each(function() {
            var title = $(this).text();
            var div = $(this).next();

            if ($(this).hasClass("curSimpleTab")) {
                titleDiv += "<span class='curSimpleTab'>" + title + "</span>";
                contentDiv += "<div>" + $(div).html() + "</div>";
            }
            else {
                titleDiv += "<span>" + title + "</span>";
                contentDiv += "<div style='display:none;'>" + $(div).html() + "</div>";
            }
        });
        titleDiv += "</div>";
        contentDiv += "</div>";

        tab.html(titleDiv + contentDiv);

        $(tab).css("height", "auto");
        $(".simpleTabContent").css("height", height + "px");

        $(tab).find(".curSimpleTab").prev().css("border-right-color", "transparent");
    });

    $(".simpleTabTitle span").click(function() {
        var clickTab = $(this);
        var clickIndex = $(".simpleTabTitle span").index(this);

        $(".simpleTabTitle span").each(function() {
            $(this).css("border-right-color", "#DDD");
        });
        $($(clickTab).prev()).css("border-right-color", "transparent");

        $(".simpleTabTitle span").removeClass("curSimpleTab");
        $(this).addClass("curSimpleTab");

        $(".simpleTabContent>div").css("display", "none");
        $(".simpleTabContent>div:eq(" + clickIndex + ")").show(); //.toggle("fast");
    });
}

function DealWithTextArea(className) {

    $("." + className).each(function() {
        var textarea = $(this);
        var textareaDisplay = textarea.css("display");
        var width = textarea.outerWidth();
        var height = textarea.outerHeight();

        var selfElementHtml = $("<div></div>").append(textarea.clone()).html();
        var newHtml = "";

        if ($.browser.mozilla) {   //firefox bug
            newHtml = "" +
        "<table style='display:" + textareaDisplay + ";'>" +
        "<tbody>" +
            "<tr>" +
                "<td class='simpleTextAreaBorderTopLeft'>" +
                "</td>" +
                "<td class='simpleTextAreaBorderTopCenter'>" +
                   selfElementHtml +
                "</td>" +
                "<td class='simpleTextAreaBorderTopRight'>" +
                "</td>" +
            "</tr>" +
            "<tr>" +
                "<td class='simpleTextAreaBorderBottomLeft'>" +
                "</td>" +
                "<td class='simpleTextAreaBorderBottomCenter'>" +
                    "<b  class='textareaFooter'>&nbsp;</b>" +
                "</td>" +
                "<td class='simpleTextAreaBorderBottomRight'>" +
                    "<b class='textAreaResize'>&nbsp;&nbsp;&nbsp;&nbsp;</b>" +
                "</td>" +
            "</tr>" +
        "</tbody>" +
         "</table>";
        }
        else {
            newHtml = "" +
        "<table style='display:" + textareaDisplay + ";' class='simpleTextareaTable'>" +
        "<tbody>" +
            "<tr>" +
                "<td style='padding: 5px;'>" +
                "</td>" +
                "<td>" +
                   selfElementHtml +
                "</td>" +
                "<td>" +
                "</td>" +
            "</tr>" +
            "<tr>" +
                "<td>" +
                "</td>" +
                "<td>" +
                    "<b  class='textareaFooter'>&nbsp;</b>" +
                "</td>" +
                "<td>" +
                    "<b class='textAreaResize'>&nbsp;&nbsp;&nbsp;&nbsp;</b>" +
                "</td>" +
            "</tr>" +
        "</tbody>" +
         "</table>";
        }
        textarea.after(newHtml);
        textarea.remove();

    });


    $("." + className).keyup(function(event) {
        var textarea = $(this);
        var text = textarea.val();
        var textereaFooter = $(textarea).parent().parent().parent().parent().find(".textareaFooter")[0]; //.parent().parent().next().children();
        $(textereaFooter).html(text.length + " words input");
    });

    $("." + className).keydown(function(event) {
        var textarea = $(this);
        var text = textarea.val();
        var textereaFooter = $(textarea).parent().parent().parent().parent().find(".textareaFooter")[0]; //.parent().parent().next().children();
        var maxWords = textarea.attr("maxwords");
        if (maxWords != null && text.length >= Number(maxWords)) {
            if (event.which == 8 /*backspace key*/) {
                return;
            }
            event.preventDefault();
        }
    });

    $("." + className).each(function() {
        var maxWidth = $(this).attr("MaxWidth");
        var minWidth = $(this).attr("MinWidth");
        var maxHeight = $(this).attr("MaxHeight");
        var minHeight = $(this).attr("MinHeight");
        if (maxWidth != null && Number($(this).outerWidth()) > Number(maxWidth)) {
            $(this).css("width", maxWidth + "px");
        }
        if (minWidth != null && Number($(this).outerWidth()) < Number(minWidth)) {
            $(this).css("width", minWidth + "px");
        }
        if (maxHeight != null && Number($(this).outerHeight()) > Number(maxHeight)) {
            $(this).css("height", maxHeight + "px");
        }
        if (minHeight != null && Number($(this).outerHeight()) < Number(minHeight)) {
            $(this).css("height", minHeight + "px");
        }

    });

    $(".textAreaResize").mousedown(function(para) {
        var area = $(this).parent().parent().prev().children().next().children();
        $(this).attr("move", "true");
        $(this).attr("oldX", para.clientX);
        $(this).attr("oldy", para.clientY);
        $(this).attr("oldWidth", area.outerWidth());
        $(this).attr("oldHeight", area.outerHeight());
        // $(".dd").html(para.clientX);
    });

    $(".textAreaResize").mouseup(function() {

        $(this).removeAttr("move");
        $(this).removeAttr("oldX");
        $(this).removeAttr("oldy");
        $(this).removeAttr("oldWidth");
        $(this).removeAttr("oldHeight");
    });

    $(document).mousemove(function(para) {
        var resizeElement = $(".textAreaResize[move='true']");
        var textArea = $(".textAreaResize[move='true']").parent().parent().prev().children().next().children();

        var newX = para.clientX;
        var newY = para.clientY;
        var oldX = resizeElement.attr("oldX");
        var oldY = resizeElement.attr("oldY");
        var oldWidth = resizeElement.attr("oldWidth");
        var oldHeight = resizeElement.attr("oldHeight");
        var newSizeWidth = Number(oldWidth) + Number(newX) - Number(oldX);
        var newSizeHeight = Number(oldHeight) + Number(newY) - Number(oldY);

        //limit resize
        var maxWidth = textArea.attr("MaxWidth");
        var minWidth = textArea.attr("MinWidth");
        var maxHeight = textArea.attr("MaxHeight");
        var minHeight = textArea.attr("MinHeight");
        if (maxWidth != null && Number(newSizeWidth) > Number(maxWidth)) {
            newSizeWidth = maxWidth;
        }
        if (minWidth != null && Number(newSizeWidth) < Number(minWidth)) {
            newSizeWidth = minWidth;
        }
        if (maxHeight != null && Number(newSizeHeight) > Number(maxHeight)) {
            newSizeHeight = maxHeight;
        }
        if (minHeight != null && Number(newSizeHeight) < Number(minHeight)) {
            newSizeHeight = minHeight;
        }

        textArea.css("width", (newSizeWidth - 2) + "px");
        textArea.css("height", (newSizeHeight - 2) + "px");

        $(".dd").html(newX + "," + "width:" + newSizeWidth + ",height;" + newSizeHeight);

    });

    $(document).mouseup(function() {
        $(".textAreaResize").removeAttr("move");
        $(".textAreaResize").removeAttr("oldX");
        $(".textAreaResize").removeAttr("oldy");
        $(".textAreaResize").removeAttr("oldWidth");
        $(".textAreaResize").removeAttr("oldHeight");
    });
}
